<template>
  <div
    class="text-message-container"
    v-bind:class="{ out: message.direction === 0 }"
  >
    <p
      class="text"
      v-html="this.$xss(this.textContent)"
      @mouseup="mouseUp"
      @contextmenu="preventContextMenuTextSelection"
    ></p>

    <!-- 消息发送时间、是否已读提示 -->
    <div
      class="msg-tips flex flex-cc"
      v-if="
        messageReadStatus &&
        message?.conversation?.type === ConversationType?.Single
      "
    >
      <div class="time mr-5">
        {{ dayjs(messageReadStatus?.timestamp).format('HH:mm') }}
      </div>

      <div class="icon">
        <img
          src="@/kang/img/icon_sended.png"
          v-if="messageReadStatus?.messageReceipt === '未读'"
        />
        <img
          src="@/kang/img/icon_readed.png"
          v-if="messageReadStatus?.messageReceipt === '已读'"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Message from '../../../../../wfc/messages/message'
import ConversationType from '../../../../../wfc/model/conversationType'
import { parser as emojiParse } from '../../../../util/emoji'
import helper from '../../../../util/helper'
//import {marked} from "marked";
import dayjs from 'dayjs'

export default {
  name: 'TextMessageContentView',
  props: {
    message: {
      type: Message,
      required: true,
    },
  },
  inject: ['messageReadStatus'],
  data() {
    return {
      textSelected: false,
      ConversationType,
      dayjs,
    }
  },
  mounted() {},

  methods: {
    mouseUp(event) {
      let selection = window.getSelection().toString()
      this.textSelected = !!selection
    },
    preventContextMenuTextSelection(event) {
      if (!this.textSelected) {
        if (window.getSelection) {
          if (window.getSelection().empty) {
            // Chrome
            window.getSelection().empty()
          } else if (window.getSelection().removeAllRanges) {
            // Firefox
            window.getSelection().removeAllRanges()
          }
        } else if (document.selection) {
          // IE?
          document.selection.empty()
        }
      }
    },
  },

  computed: {
    textContent() {
      let content = this.message.messageContent.digest(this.message).trim()
      let lines = content.replace(/\r\n/g, '\n').split('\n')
      if (lines.length > 1) {
        content = lines
          .map((line) => `<span>${helper.escapeHtml(line)}</span>\n`)
          .reduce((total, cv, ci, arr) => total + cv, '')
      } else {
        content = helper.escapeHtml(content)
      }

      content = emojiParse(content)
      // tmp = marked.parse(tmp);
      if (content.indexOf('<img') >= 0) {
        content = content.replace(/<img/g, '<img style="max-width:400px;"')
        return content
      }
      return content
    },
  },
}
</script>

<style lang="scss" scoped>
.text-message-container {
  margin: 0 10px;
  padding: 10px;
  background-color: white;
  position: relative;
  border-radius: 5px;
}

.text-message-container >>> p {
  user-select: text;
  white-space: pre-line;
}

.text-message-container >>> code {
  background: #f5f5f5;
  display: inline-block;
  border-radius: 3px;
  padding: 0 5px;
  user-select: text;
}

.text-message-container.out {
  background-color: #a8bdff;
}

.text-message-container .text {
  color: #050505;
  font-size: 13px;
  line-height: 20px;
  /*max-height: 1000px;*/
  max-width: 400px;
  word-spacing: normal;
  word-break: break-word;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  user-select: text;
}

/*style for v-html */
.text-message-container .text >>> img {
  max-width: 400px !important;
  display: inline-block;
}

.text-message-container .text >>> a {
  white-space: normal;
}

.text-message-container .text >>> .emoji {
  vertical-align: middle;
}

.text-message-container {
  line-height: 1;

  .msg-tips {
    margin-top: 2px;

    .time {
      font-size: 12px;
      color: var(--color-second);
    }

    .icon {
      height: 0;

      img {
        transform: translateY(-10px);
        width: 20px;
      }
    }
  }

  &.out {
    .msg-tips {
      .time {
        color: #4a9c40;
      }
    }
  }
}
</style>
